<template>
    <div class="help">
        <div class="backgrounds">
            <div @click.stop="CancelLogin" class="nav">
                <div class="nav-inner">
                    <ul class="nav-menu clearfix">
                        <li @click="Jump" style="display: inline-flex;">
                            <img style="width: 48px;height: 48px;margin-top: 8px;" src="../assets/logo/logo.png" alt="">
                            <div>成都市政务云监管平台</div>
                        </li>
                        <li @click="Jumps('Notification')">
                            <a style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                "
                            href="/#/Notification">官网公告</a>
                        </li>
                        <li>
                            <a style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                border-bottom: 4px solid #fff;
                                "
                            href="/#/help">帮助与支持</a>
                        </li>
                        <li @click="Jumps('ResourceCalculator')">
                            <a href="/#/ResourceCalculator" style="color: #fff;
                                display: inline-block;
                                height: 62px;
                                line-height: 62px;
                                vertical-align: middle;
                                margin: 0 15px;
                                font-size: 16px;
                                letter-spacing: 2px;
                                position: relative;
                                "
                            >资源计算器</a>
                        </li>

                    </ul>
                    <ul class="nav-login clearfix">
                        <li @click.stop="chengeState">
                            <div class="home-button">登录</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div @click.stop="CancelLogin" class="carousel-inner">
                <div class="box">
                    <img src="../assets/help/banner.jpg" alt="" />
                </div>
            </div>



          <div style="text-align: center;">
              <h1>流程图</h1>
              <div style="display: flex;justify-content: center;min-width: 1344px;">
             <!--   <img style="height: 770px;" src="../assets/help/liuchengtu1.png"></img>
                <img style="height: 770px;" src="../assets/help/liuchengtu2.png"></img>
                 <img style="height: 770px;" src="../assets/help/liuchengtu3.png"></img> -->
                  <img style="width: 28.59%;" src="../assets/help/liuchengtu1.png"></img>
                <img style="width: 35.26%" src="../assets/help/liuchengtu2.png"></img>
                 <img style="width: 26.48%;" src="../assets/help/liuchengtu3.png"></img>
              </div>
              <h1 style="margin-top: 40px;">模板下载</h1>
              <div style="display: flex;margin: 40px 0;justify-content: space-around;">
                <div style="display: flex;"  v-for="item in list">
                    <div>
                      <img style="width: 90px;" :src="item.img"></img>
                      <div style="margin-top: 10px;">{{item.name}}</div>
                    </div>
                    <div style="margin-left: 60px;">
                        <div style="cursor: pointer;color: rgb(0,121,188);text-align: left;margin-bottom: 10px;"
                        @click="down(it)" v-for="it in item.data">{{it.fileName}}</div>
                    </div>
                </div>

              </div>
          </div>










            <div
                class="suspension"
                :style="LoginStatus ? 'right: 0px;' : 'right: -800px;'"
            >
                <el-row
                    class="el-suspension"
                    style="
                        margin-top: calc(50% - 161px);
                        height: 322px;
                        width: 700px;
                        margin-left: 50px;
                    "
                >
                    <el-col :span="12">
                        <div class="BackgroundImg"></div>
                    </el-col>
                    <el-col
                        :span="12"
                        style="padding: 25px 25px 5px 25px; background: #fff"
                    >
                        <el-form
                            ref="loginForm"
                            :model="loginForm"
                            :rules="loginRules"
                            class="login-form"
                        >
                            <h3 class="title">成都市政务云</h3>
                            <el-form-item prop="username">
                                <el-input
                                    v-model="loginForm.username"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="账号"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="user"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    v-model="loginForm.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="密码"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="password"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input
                                    v-model="loginForm.code"
                                    auto-complete="off"
                                    placeholder="验证码"
                                    style="width: 63%"
                                    @keyup.enter.native="handleLogin"
                                >
                                    <svg-icon
                                        slot="prefix"
                                        icon-class="validCode"
                                        class="el-input__icon input-icon"
                                    />
                                </el-input>
                                <div class="login-code">
                                    <img
                                        :src="codeUrl"
                                        @click="getCode"
                                        class="login-code-img"
                                    />
                                </div>
                            </el-form-item>
                            <el-form-item style="width: 100%">
                                <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width: 100%"
                                    @click.native.prevent="handleLogin"
                                >
                                    <span v-if="!loading">登 录</span>
                                    <span v-else>登 录 中...</span>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { treeselect } from "@/api/system/dept";
import { getDicts } from "@/api/system/dict/data";
import { listByCode, serviceByClazz } from "@/api/resources/apply";
import { helpList } from "@/api/system/user";

  import {
    getRouters
  } from "@/api/menu.js";
export default {
    data() {
        return {
            active: 0,
            type: 1,
            notice: [],
            Notice: [],
            loading: false,
            base_url: process.env.VUE_APP_BASE_API,
            detailsData: null,
            loginForm: {
                username: "", //test_cloud_manage
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "用户名不能为空",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "密码不能为空",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "验证码不能为空",
                    },
                ],
            },
            productServiceTitleState: 0,
            LoginStatus: false,
            codeUrl: "",
            cookiePassword: "",
            redirect: undefined,
            list: [{name:'业务模板',data:[],img:require("../assets/help/left.png")},
            {name:'常用工具',data:[],img:require("../assets/help/right.png")}],
        };
    },
    created() {
        this.getCode();
        this.getCookie();
        this.helpList();
    },
    methods: {
     down(item) {
       let url = process.env.VUE_APP_BASE_API + "/common/download/resource?filePath=" + encodeURI(item.filePath) + "&downloadName="+encodeURI(item.fileName)+"&delete=" + false;
       window.open(url);
     },
      Jump(){
          this.$router.push({path:'/login'}).catch((err)=>{
          });
      },
      Jumps(Path){
          this.$router.push({path:Path}).catch((err)=>{
          });
      },
      getCode() {
          getCodeImg().then((res) => {
              this.codeUrl = "data:image/gif;base64," + res.img;
              this.loginForm.uuid = res.uuid;
          });
      },
      chengeState() {
          this.LoginStatus = !this.LoginStatus;
      },
      getCookie() {
          const username = Cookies.get("username");
          const password = Cookies.get("password");
          const rememberMe = Cookies.get("rememberMe");
          this.loginForm = {
              username:
                  username === undefined ? this.loginForm.username : username,
              password:
                  password === undefined
                      ? this.loginForm.password
                      : decrypt(password),
              rememberMe:
                  rememberMe === undefined ? false : Boolean(rememberMe),
          };
      },
      handleLogin() {
          this.$refs.loginForm.validate((valid) => {
              if (valid) {
                  this.loading = true;
                  if (this.loginForm.rememberMe) {
                      Cookies.set("username", this.loginForm.username, {
                          expires: 30,
                      });
                      Cookies.set(
                          "password",
                          encrypt(this.loginForm.password),
                          { expires: 30 }
                      );
                      Cookies.set("rememberMe", this.loginForm.rememberMe, {
                          expires: 30,
                      });
                  } else {
                      Cookies.remove("username");
                      Cookies.remove("password");
                      Cookies.remove("rememberMe");
                  }
                  var loginForm
                  loginForm = JSON.parse(JSON.stringify(this.loginForm))
                  const Base64 = require('js-base64').Base64
                  var secret = ".m9xVBmvdvhiTO";
                  let password = loginForm.password + secret
                  let  r = Base64.encode(password);
                  loginForm.password = Base64.encode(r)
                  this.$store.dispatch("IsInsideFunction", true);
                 this.$store
                   .dispatch("Login", loginForm)
                   .then((res) => {
                     this.$router.push({
                       path: this.redirect || "/",
                     });
                   })
                   .catch(() => {
                     this.loading = false;
                     this.getCode();
                   });
              }
          });
      },
      helpList(){
        helpList({fileType:'业务模板',pageNum:1,pageSize:100}).then(res=>{
          if(res.success){
            this.list[0].data=res.rows
          }
        })
        helpList({fileType:'系统工具',pageNum:1,pageSize:100}).then(res=>{
          if(res.success){
            this.list[1].data=res.rows
          }
        })

      },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.help {
   // position: relative;
   overflow-y: none;
   box-sizing: border-box;
   width: 100%;
   min-height: 100vh;
   // min-min-width: 1344px;
   // width: 1920px;
    .backgrounds {
        width: 100%;
        overflow-y: none;
        // position: absolute;
        .nav {
           width: 100%;
           // width: 1920px;
           // height: 64px;
           position: absolute;
           z-index: 9;
           // min-width: 1060px;
           background: rgba($color: #000000, $alpha: 0.4);
           transition: 0.5s;
           // padding: 0 40px;
            .nav-inner {
                // width: 1200px;
                // min-width: 1080px;
                // height: 64px;
                margin: 0 auto;
                line-height: 64px;
                display: flex;
                justify-content: space-around;
                .nav-menu {
                    display: inline-block;
                    vertical-align: middle;
                }
                .clearfix {
                    zoom: 1;
                }
                ul.nav-menu > li,
                .nav-login > li {
                    float: left;
                }
                ul {
                    margin: 0;
                    padding: 0;
                    letter-spacing: 2px;
                }
                ul > li {
                    list-style-type: none;
                }
                ul.nav-menu div {
                    color: #fff;
                    display: inline-block;
                    height: 62px;
                    line-height: 62px;
                    vertical-align: middle;
                    margin: 0 15px;
                    font-size: 16px;
                    letter-spacing: 2px;
                    position: relative;
                }
                .nav-login {
                    float: right;
                    height: 64px;
                    .home-button {
                        display: inline-block;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        color: #fff;
                        border: 1px solid #fff;
                        margin: 15px 10px;
                        width: 90px;
                        font-size: 14px;
                        letter-spacing: 2px;
                        position: relative;
                        transition: all 0.3s;
                    }
                    .home-button:hover {
                        color: #000;
                    }
                    .home-button:hover:after {
                        width: 100%;
                    }
                    .home-button:after {
                        content: "";
                        position: absolute;
                        z-index: -9;
                        left: 0;
                        top: 0;
                        height: 100%;
                        width: 0;
                        background-color: #fff;
                        transition: all 0.3s;
                    }
                }
                ul.nav-menu > li:first-child div {
                    margin: 0 20px 0 0;
                    color: #fff;
                    font-size: 24px;
                }
            }
        }


        .nav:hover {
            background: rgba($color: #000000, $alpha: 0.8);
            cursor: pointer;
        }
        .carousel-inner {
            position: relative;
            width: 100%;
            .box {
                // width: 1920px;
                width: 100%;
                min-width: 1344px;
                height: 300px;
                margin: 0 auto;
                img {
                    margin-top: -320px;
                    width: 100%;
                    height: 600px;
                }
            }
        }
        .suspension {
            position: fixed;
            box-sizing: border-box;
            height: 100vh;
            width: 800px;
            right: 0px;
            top: 0px;
            z-index: 999;
            background: rgba($color: #000000, $alpha: 0.8);
            transition: 0.5s ease-in;
            .el-suspension{
                background: url("../assets/icons/20210526170647.jpg") no-repeat;
                background-size: 100%;
                background-position: 60%;
                .BackgroundImg {
                    width: 100%;
                    height: 322px;
                    // background: url("../assets/icons/Data.png") no-repeat;
                    // background-size: 80%;
                    // background-position: 60%;
                    // background-color: #00f2fe;
                }
                // margin: 0 30px;
                .login-form {
                    border-radius: 6px;
                    // background: #ffffff;
                    width: 300px;
                    // margin-top: 50%;
                    // margin-left: 50px;
                    // padding: 25px 25px 5px 25px;
                    box-sizing: border-box;
                    .title{
                        margin: 0px auto 30px auto;
                        text-align: center;
                        color: #707070;
                    }
                    .el-input {
                        height: 38px;
                        input {
                            height: 38px;
                        }
                    }
                    .input-icon {
                        height: 39px;
                        width: 14px;
                        margin-left: 2px;
                    }
                }
            }
            .login-tip {
                font-size: 13px;
                text-align: center;
                color: #bfbfbf;
            }
            .login-code {
                width: 33%;
                height: 38px;
                float: right;
                img {
                    cursor: pointer;
                    vertical-align: middle;
                }
            }
        }
        .notice {
            background-color: #f4f5f7;
            overflow: hidden;
            .content {
                box-sizing: border-box;
                width: 1200px;
                margin: 20px auto 40px auto;
                background-color: #fff;
                .container-fluid {
                    padding-left: 15px;
                    padding-right: 15px;
                    margin-bottom: 20px;
                    display: flex;
                    background-color: #f4f5f7;
                    .col-md-4 {
                        box-sizing: border-box;
                        width: 33.33333333%;
                        padding-left: 0;
                        margin-right: 15px;
                        background-color: #fff;
                        min-height: 550px;
                        .container-fluid {
                            width: 100%;
                            box-sizing: border-box;
                            background-color: #fff;
                            overflow: hidden;
                            display: flex;
                            div {
                                padding: 0 15px;
                                height: 45px;
                                line-height: 45px;
                                text-align: center;
                                border: 1px solid #ddd;
                                margin-bottom: 0;
                                cursor: pointer;
                            }
                        }
                        .leftContent {
                            background-color: #fff;
                            overflow: hidden;
                            padding-left: 15px;
                            .list {
                                margin: 0;
                                padding: 0;
                                li {
                                    cursor: pointer;
                                    position: relative;
                                    height: 26px;
                                    i {
                                        display: inline-block;
                                        width: 8px;
                                        height: 8px;
                                        background-color: #efefef;
                                        border-radius: 5px;
                                        position: absolute;
                                        top: 9px;
                                        left: 0;
                                    }
                                    span {
                                        display: inline-block;
                                        height: 26px;
                                        line-height: 26px;
                                        width: 90%;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        color: #383a39;
                                        margin-left: 20px;
                                    }
                                }
                            }
                            ul,
                            li {
                                list-style: none;
                            }
                        }
                    }
                    .col-md-8 {
                        width: 66.66666667%;
                        padding-left: 0;
                        background-color: #fff;
                        .notice_details {
                            padding: 0 15px 15px;
                            div{
                                p{
                                    img{
                                        width: 100%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
